<template>
  <view class="searchContain padding-bottom">
    <view style="border-bottom: 1px solid #eee; height: 100rpx">
      <view class="searchInput">
        <input @confirm="goSearchDetail" v-model="keyword" type="text" focus placeholder="请输入商家或商品名称" />
        <img @click="goSearchDetail" style="width: 40rpx; height: 40rpx" src="@/static/搜索.png" alt="" />
      </view>
    </view>

    <!-- 最近搜索 -->
    <view class="recentSearch" v-if="searchList.length">
      <view style="display: flex; justify-content: space-between">
        <view>最近搜索</view>
        <img style="width: 40rpx; height: 40rpx" src="@/static/删除.png" @click="clean" alt="" />
      </view>
      <view class="recentList">
        <view @click="searchDetail" style="display: flex" v-for="(item, index) in searchList" :key="index" class="searchItem">{{
          item
        }}</view>
      </view>
    </view>

    <!-- 热门搜索 -->
    <view class="hotSearch">
      <view>热门搜索</view>
      <view class="hotList">
        <view
          @click="searchDetail(hotItem.title)"
          class="searchItem"
          v-show="hotItem.title.length < 4 && hotItem.title.length !== 1"
          v-for="(hotItem, index) in hotList"
          :key="index"
          >{{ hotItem.title }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      // 最近搜索
      searchList: uni.getStorageSync('searchList') ? JSON.parse(uni.getStorageSync('searchList')) : [],
      // 搜索关键词
      keyword: ''
    }
  },
  created() {
    this.$store.dispatch('getHotList')
  },
  computed: {
    ...mapState({
      hotList: (state) => state.search.hotList
    })
  },
  methods: {
    clean() {
      uni.showModal({
        content: '确认要清除历史记录吗?',
        success: (res) => {
          if (res.confirm) {
            this.searchList = []
            uni.removeStorageSync('searchList')
          }
        }
      })
    },
    goSearchDetail() {
      if (this.keyword.trim()) {
        if (this.searchList.indexOf(this.keyword) == -1) {
          this.searchList.unshift(this.keyword)
          uni.setStorageSync('searchList', JSON.stringify(this.searchList))
          uni.navigateTo({
            url: '/pages/search/searchDetail/index?kwords=' + encodeURIComponent(this.keyword)
          })
        } else {
          // this.searchList.splice(this.keyword, 1)
        }
      } else {
        uni.showToast({
          title: '请输入关键词',
          icon: 'none',
          duration: 2000
        })
      }
    },
    searchDetail(kwords) {
      uni.navigateTo({
        url: '/pages/search/searchDetail/index?kwords=' + encodeURIComponent(kwords)
      })
    }
  }
}
</script>

<style lang="less" scoped>
page {
  font-size: 30rpx;
}

.searchContain {
  height: 700px;
  overflow: hidden;
}

.searchInput {
  display: flex;
  justify-content: space-between;
  height: 60rpx;
  align-items: center;
  border: 1px solid #ccc;
  margin: 0 25rpx;
  border-radius: 6px;
  color: #666666;
  padding: 0 15rpx;

  img {
    border-left: 1px solid #ccc;
  }
}

.hotSearch {
  margin: 25rpx;

  .hotList {
    margin-top: 25rpx;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
}

.recentSearch {
  margin: 25rpx;

  .recentList {
    display: flex;
    flex-wrap: wrap;
  }
}

.searchItem {
  width: 200rpx;
  height: 65rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
  border-radius: 1.5rem;
  margin: 20rpx 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
